
<style scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: relative;
}
.avatar_box {
  height: 130px;
  width: 130px;
  border: 1px solid #eeeeee;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 0 10px #dddddd;
  margin: 0 auto;
  transform: translateY(-50%);
  background-color: #fff;
}
.avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eeeeee;
}
.form-box {
  position: relative;
  width: 87%;
  margin: auto;
  top: -50px;
}
</style>

<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像去 -->
      <div class="avatar_box">
        <img
          src="../assets/logo.png"
          alt="logo"
        >
      </div>
      <!-- 登陆表单区 -->
      <form
        action="#"
        class="form-box"
      >
        <el-input
          label="用户名"
          name="username"
          id=""
        ></el-input>

        <!-- label="密&emsp;码" -->
        <el-input
          label="密  码"
          name="password"
          type="password"
        ></el-input>
        <el-input
          name="password"
          type="hidden"
        ></el-input>

        <el-input
          label=""
          disabled="true"
          placeholder="这是禁用~~"
        ></el-input>

        <div class="text-align">
          <el-button
            @click="login"
            info="登陆"
            type="submit"
            colorType="primary"
          ></el-button>
          <el-button
            info="重置"
            type="reset"
            colorType="danger"
            id="123456"
          ></el-button>
        </div>
      </form>
    </div>
  </div>
</template> 

<script>
import elInput from "../components/utils/input.vue";
import elButton from "../components/utils/button.vue";

import $ from 'jquery'
import axios from "axios"

export default {
  name: "Login",
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
  },
  methods: {
    async login() {
      //  this.$message('这是一条消息提示');
      this.$message({
        message: "内容可以是",
      });
      let username = $('form input[name="username"]').val();
      let password = $('form input[name="password"]').val();
      console.log("msg", username, password);

      let data = {
        username: username,
        password: password,
      };
      let url = "http://192.168.30.192:8888/api/private/v1/login";
      let eee = await axios.post(url, data);
      console.log("eee", eee);
      console.log("eee", typeof eee);
    },
  },
  components: {
    elInput,
    elButton,
  },
};
</script>
